<template>
  <div style="width: 100%" class="job">
    <div class="myChart" ref="myChart"></div>
  </div>
</template>
<script>
// http://echarts.zhangmuchen.top/#/detail?cid=xT1JWXkiKc
import * as echarts from "echarts";
import { api } from "@/utils/api";

// getNdsdPerhourAPI
export default {
  name: "Proportion",
  data() {
    return {
      myCharts: null,
      timer: null,
    };
  },
  mounted() {
    this.getNdsdPerhour().then((res) => {
      this.OptionSet(res);
    });
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    } else {
      this.timer = setInterval(() => {
        this.getNdsdPerhour().then((res) => {
          this.OptionSet();
        });
      }, 10000);
    }
  },
  destroyed() {
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    getNdsdPerhour() {
      return new Promise(async (reslove, reject) => {
        let params = {};
        let [ERR, LRES] = await api.getNdsdPerhourAPI();
        this.Usage = LRES.data;
        reslove(LRES.data);
        // console.log("getNdsdUsage", LRES);
      });
    },
    OptionSet(res) {
      let timeData = res.map((m) => m.currentHour);
      let InBoundCompleteCount = res.map((m) => m.InBoundCompleteCount);
      let OutBoundCompleteCount = res.map((m) => m.OutBoundCompleteCount); // for (let index = 0; index < 25; index++) {
      //   timeData.push(index + ":00");
      // }
      let myCharts = echarts.init(this.$refs.myChart);
      let option = {
        title: {
          //   text: "哎呦,不错哦",
          textStyle: {
            align: "center",
            color: "#fff",
            fontSize: 20,
          },
          top: "5%",
          left: "center",
        },
        legend: {
          data: ["出库数量", "入库数量"],
          right: "50",
          top: "0",
          textStyle: {
            padding: [4, 0, 0, 0],
            color: "33FFFF",
          },
          itemWidth: 15,
          itemHeight: 10,
          itemGap: 10,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0, 255, 233,0)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(255, 255, 255,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 255, 233,0)",
                  },
                ],
                global: false,
              },
            },
          },
        },
        dataZoom: [
          {
            // 滑动条组件
            type: "slider", // 设置为滑动条型式
            start: 25, // 左边在 0% 的位置
            end: 75, // 右边在 100% 的位置
            bottom: 35,
            show: true, // 显示 dataZoom 组件
            xAxisIndex: [0], // 控制第一个x轴
            handleSize: 10, // 滑动条的手柄大小
            handleStyle: {
              color: "#DCE2E8", // 滑动条的手柄颜色
            },
            borderColor: "#000", // 组件边框颜色
            fillerColor: "#269cdb", // 选中范围的颜色
            backgroundColor: "#33384b", // 未选中范围的颜色
          },
        ],
        grid: {
          top: "15%",
          left: "5%",
          right: "5%",
          bottom: "15%",
          // containLabel: true
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              show: true,
            },
            splitArea: {
              // show: true,
              color: "#f00",
              lineStyle: {
                color: "#f00",
              },
            },
            axisLabel: {
              color: "#fff",
            },
            splitLine: {
              show: false,
            },
            boundaryGap: false,
            data: timeData,
          },
        ],

        yAxis: [
          {
            type: "value",
            min: 0,
            // max: 140,
            splitNumber: 4,
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,0.1)",
              },
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
              margin: 20,
              textStyle: {
                color: "#d1e6eb",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "出库数量",
            type: "line",
            // smooth: true, //是否平滑
            showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            symbol: "circle",
            symbolSize: 15,
            lineStyle: {
              normal: {
                color: "#6c50f3",
                shadowColor: "rgba(0, 0, 0, .3)",
                shadowBlur: 0,
                shadowOffsetY: 5,
                shadowOffsetX: 5,
              },
            },
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#6c50f3",
              },
            },
            itemStyle: {
              color: "#6c50f3",
              borderColor: "#fff",
              borderWidth: 3,
              shadowColor: "rgba(0, 0, 0, .3)",
              shadowBlur: 0,
              shadowOffsetY: 2,
              shadowOffsetX: 2,
            },
            tooltip: {
              show: false,
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(108,80,243,0.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(108,80,243,0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(108,80,243, 0.9)",
                shadowBlur: 20,
              },
            },
            data: OutBoundCompleteCount,
          },
          {
            name: "入库数量",
            type: "line",
            // smooth: true, //是否平滑
            showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            symbol: "circle",
            symbolSize: 15,
            lineStyle: {
              normal: {
                color: "#00ca95",
                shadowColor: "rgba(0, 0, 0, .3)",
                shadowBlur: 0,
                shadowOffsetY: 5,
                shadowOffsetX: 5,
              },
            },
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#00ca95",
              },
            },

            itemStyle: {
              color: "#00ca95",
              borderColor: "#fff",
              borderWidth: 3,
              shadowColor: "rgba(0, 0, 0, .3)",
              shadowBlur: 0,
              shadowOffsetY: 2,
              shadowOffsetX: 2,
            },
            tooltip: {
              show: false,
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0,202,149,0.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(0,202,149,0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0,202,149, 0.9)",
                shadowBlur: 20,
              },
            },
            data: InBoundCompleteCount,
          },
        ],
      };
      // console.log("option", option);
      myCharts.setOption(option, true);
    },
  },
};
</script>
<style lang="scss" scoped>
.job {
  height: calc(100% - 30px);
}
@font-face {
  font-family: "FZY4JW";
  src: url("../../assets/font/FZY4JW.TTF");
}
@font-face {
  font-family: "FZZiYHJW";
  src: url("../../assets/font/FZZiYHJW.TTF");
}
.zb_space {
  font-family: "FZY4JW";
  .lenth {
    display: flex;
    justify-content: center;
    align-items: center;
    .num {
      font-size: 28px;
      padding-left: 8px;
      position: relative;
      bottom: 2px;
    }
    span {
      font-size: 28px;
    }
  }
  .tag {
    width: 8px;
    height: 8px;
    background: fuchsia;
    border-radius: 50%;
    margin-right: 5px;
  }
  width: 40%;
  height: 80%;
  //   border: 1px solid rebeccapurple;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  .zb_space_txt_center {
    // display: flex;
    // justify-content: center;
    // align-items: center;
    // height: 70%;
    // border: 1px solid blue;
  }
}
.myChart,
.myChart2 {
  width: 100%;
  height: 100%;
}
</style>
